<script setup lang="ts">
import { ref, computed, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import { getUserFavorites } from "../../api/favorites";
import { useUserStore } from "../../stores/user";
import { useCategoryStore } from "../../stores/category";
import { getPostById } from "../../api/forum";

const router = useRouter();
const userStore = useUserStore();
const categoryStore = useCategoryStore();

// 分页状态 - 为每个分类存储独立的分页数据
const pagination = ref<
  Record<
    number | "all",
    {
      currentPage: number;
      pageSize: number;
      total: number;
      totalPages: number;
    }
  >
>({
  all: {
    // 全部分类的初始分页状态
    currentPage: 1,
    pageSize: 10,
    total: 0,
    totalPages: 1,
  },
});

// 当前选中的分类（'all'表示全部）
const selectedCategory = ref<number | "all">("all");

// 收藏数据 - 按分类存储
const favorites = ref<Record<number | "all", any[]>>({
  all: [],
});
const loading = ref(false);
const error = ref<string | null>(null);

// 验证用户ID有效性
const getValidUserId = () => {
  const id = Number(userStore.id);
  if (isNaN(id)) {
    error.value = "用户ID无效，请重新登录";
    throw new Error("无效的用户ID");
  }
  return id;
};

// 初始化分类的分页状态
function initCategoryPagination(categoryId: number | "all") {
  if (!pagination.value[categoryId]) {
    pagination.value[categoryId] = {
      currentPage: 1,
      pageSize: 10,
      total: 0,
      totalPages: 1,
    };
  }
  if (!favorites.value[categoryId]) {
    favorites.value[categoryId] = [];
  }
}

// 获取收藏列表
async function fetchFavorites(page = 1) {
  loading.value = true;
  error.value = null;
  const category = selectedCategory.value;

  // 初始化当前分类的分页数据
  initCategoryPagination(category);

  try {
    const userId = getValidUserId();
    console.log(`正在请求第 ${page} 页数据，用户ID: ${userId}`);

    // 调用API获取收藏数据
    const res = await getUserFavorites(userId, {
      PageNum: page,
      PageSize: pagination.value[category].pageSize,
    });

    console.log("API响应:", res);

    if (res && res.data) {
      // 更新当前分类的分页信息
      pagination.value[category] = {
        currentPage: page,
        pageSize: res.data.pageSize || pagination.value[category].pageSize,
        total: res.data.total || 0,
        totalPages:
          res.data.totalPages ||
          Math.ceil(
            (res.data.total || 0) / pagination.value[category].pageSize
          ),
      };

      // 获取帖子详情数据
      if (res.data.records?.length > 0) {
        const postsWithCategories = await Promise.all(
          res.data.records.map(async (item: any) => {
            try {
              const postDetail = await getPostById(item.postId);
              return {
                ...item,
                id: item.postId,
                title: item.title,
                author: item.nickname,
                collectedTime: item.collectAt,
                category_id: postDetail.data?.categoryId || 1,
              };
            } catch (e) {
              console.error(`获取帖子详情失败: ${item.postId}`, e);
              return {
                ...item,
                id: item.postId,
                title: item.title,
                author: item.nickname,
                collectedTime: item.collectAt,
                category_id: 1,
              };
            }
          })
        );

        // 按分类存储数据
        favorites.value[category] = postsWithCategories;

        // 如果是"全部"分类，同时更新各独立分类的数据
        if (category === "all") {
          postsWithCategories.forEach((post) => {
            const catId = post.category_id;
            initCategoryPagination(catId);
            if (!favorites.value[catId]) {
              favorites.value[catId] = [];
            }
            // 避免重复添加
            if (!favorites.value[catId].some((p) => p.id === post.id)) {
              favorites.value[catId].push(post);
            }
          });
        }
      } else {
        favorites.value[category] = [];
      }
    } else {
      throw new Error("无效的响应数据");
    }
  } catch (err: any) {
    console.error("获取收藏列表失败:", err);
    error.value =
      err.response?.data?.message ||
      err.message ||
      "获取收藏列表失败，请稍后重试";
    favorites.value[category] = [];
  } finally {
    loading.value = false;
  }
}

// 监视用户ID变化
watch(
  () => userStore.id,
  (newId) => {
    if (newId) {
      fetchFavorites();
    }
  }
);

// 初始化加载
onMounted(() => {
  if (userStore.id) {
    fetchFavorites();
  }
  if (categoryStore.categories.length === 0) {
    categoryStore.fetchCategories();
  }
});

// 处理页码变化
function handlePageChange(newPage: number) {
  const category = selectedCategory.value;
  if (newPage < 1 || newPage > pagination.value[category].totalPages) return;

  console.log(`请求切换到第 ${newPage} 页`);
  fetchFavorites(newPage);
}

// 处理下一页
function handleNextPage() {
  const category = selectedCategory.value;
  const nextPage = pagination.value[category].currentPage + 1;
  if (nextPage <= pagination.value[category].totalPages) {
    handlePageChange(nextPage);
  }
}

// 处理上一页
function handlePrevPage() {
  const category = selectedCategory.value;
  const prevPage = pagination.value[category].currentPage - 1;
  if (prevPage >= 1) {
    handlePageChange(prevPage);
  }
}

// 选择分类
function selectCategory(id: number | "all") {
  selectedCategory.value = id;
  initCategoryPagination(id);

  // 如果该分类没有数据，则加载第一页
  if (favorites.value[id]?.length === 0) {
    fetchFavorites(1);
  }
}

// 获取当前显示的收藏列表
const filteredFavorites = computed(() => {
  const category = selectedCategory.value;

  // 如果当前分类没有数据，返回空数组
  if (!favorites.value[category] || favorites.value[category].length === 0) {
    return [];
  }

  // 如果是"全部"分类，直接返回所有数据
  if (category === "all") {
    return favorites.value[category];
  }

  // 对于特定分类，返回该分类的数据
  return favorites.value[category].filter(
    (post) => post.category_id === category
  );
});

// 获取当前分类的分页信息 - 确保总是返回有效的分页对象
const currentPagination = computed(() => {
  const category = selectedCategory.value;
  return (
    pagination.value[category] || {
      currentPage: 1,
      pageSize: 10,
      total: 0,
      totalPages: 1,
    }
  );
});

function formatTime(timeString: string) {
  const date = new Date(timeString);
  return `${date.getFullYear()}-${padZero(date.getMonth() + 1)}-${padZero(
    date.getDate()
  )} ${padZero(date.getHours())}:${padZero(date.getMinutes())}`;
}

function padZero(num: number) {
  return num < 10 ? `0${num}` : num;
}

function goToPost(postId: number) {
  router.push(`/forum/${postId}`);
}
</script>

<template>
  <div class="flow-container">
    <div class="favorites-center-container">
      <aside class="favorites-sidebar">
        <div class="sidebar-header">
          <div class="sidebar-icon">
            <svg viewBox="0 0 24 24" class="icon">
              <path d="M17,3H7A2,2 0 0,0 5,5V21L12,18L19,21V5C19,3.89 18.1,3 17,3Z"/>
            </svg>
          </div>
          <h3>收藏分类</h3>
        </div>
        <ul class="category-list">
          <li
            :class="['category-item', { active: selectedCategory === 'all' }]"
            @click="selectCategory('all')"
          >
            <div class="category-content">
              <span class="category-icon">📚</span>
              <span>全部</span>
            </div>
          </li>
          <li
            v-for="cat in categoryStore.categories"
            :key="cat.id"
            :class="['category-item', { active: selectedCategory === cat.id }]"
            @click="selectCategory(cat.id)"
          >
            <div class="category-content">
              <span class="category-icon">🏷️</span>
              <span>{{ cat.name }}</span>
            </div>
          </li>
        </ul>
      </aside>
      <main class="main-content">
        <div class="favorites-header">
          <div class="header-content">
            <div class="header-left">
              <h2>我的收藏</h2>
              <span class="category-name" v-if="selectedCategory !== 'all'">
                · {{ categoryStore.categories.find((c) => c.id === selectedCategory)?.name }}
              </span>
            </div>
            <div class="header-stats">
              <div class="stat-item">
                <span class="stat-number">{{ currentPagination.total }}</span>
                <span class="stat-label">篇收藏</span>
              </div>
            </div>
          </div>
        </div>
        
        <div class="favorites-list">
          <div v-if="loading" class="loading-indicator">
            <div class="loading-spinner"></div>
            <p>正在加载收藏内容...</p>
          </div>
          
          <div v-else-if="filteredFavorites.length === 0" class="empty-tips">
            <div class="empty-animation">
              <div class="floating-books">
                <div class="book book-1">📚</div>
                <div class="book book-2">📖</div>
                <div class="book book-3">📓</div>
              </div>
              <div class="empty-icon-container">
                <svg viewBox="0 0 24 24" class="empty-icon">
                  <path d="M17,3H7A2,2 0 0,0 5,5V21L12,18L19,21V5C19,3.89 18.1,3 17,3Z"/>
                </svg>
              </div>
            </div>
            <div class="empty-content">
              <h3>还没有收藏的内容</h3>
              <p>发现有趣的帖子，点击收藏按钮就能保存到这里</p>
              <div class="empty-features">
                <div class="feature-item">
                  <span class="feature-icon">🎯</span>
                  <span>精准分类</span>
                </div>
                <div class="feature-item">
                  <span class="feature-icon">⚡</span>
                  <span>快速访问</span>
                </div>
                <div class="feature-item">
                  <span class="feature-icon">💖</span>
                  <span>永久保存</span>
                </div>
              </div>
              <button class="explore-button" @click="router.push('/forumhome')">
                <svg viewBox="0 0 24 24" class="button-icon">
                  <path d="M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M15,18V16H6V18H15M18,14V12H6V14H18Z"/>
                </svg>
                去发现精彩内容
              </button>
            </div>
          </div>
          
          <template v-else>
            <div class="favorites-grid">
              <div
                v-for="post in filteredFavorites"
                :key="post.id"
                class="favorite-item"
                @click="goToPost(post.id)"
              >
                <div class="item-header">
                  <div class="bookmark-icon">
                    <svg viewBox="0 0 24 24" class="bookmark-svg">
                      <path d="M17,3H7A2,2 0 0,0 5,5V21L12,18L19,21V5C19,3.89 18.1,3 17,3Z"/>
                    </svg>
                    <div class="bookmark-shine"></div>
                  </div>
                  <div class="category-badge">
                    <span class="badge-icon">🏷️</span>
                    {{ categoryStore.categories.find(c => c.id === post.category_id)?.name || '未分类' }}
                  </div>
                </div>
                
                <div class="post-main">
                  <h3 class="post-title">{{ post.title }}</h3>
                  <p class="post-content">{{ post.content }}</p>
                  <div class="post-tags">
                    <span class="tag">收藏</span>
                    <span class="tag">{{ categoryStore.categories.find(c => c.id === post.category_id)?.name || '未分类' }}</span>
                  </div>
                </div>
                
                <div class="post-meta">
                  <div class="author-info">
                    <div class="author-avatar">
                      <span class="avatar-text">{{ post.author.charAt(0) }}</span>
                    </div>
                    <div class="author-details">
                      <span class="author-name">{{ post.author }}</span>
                      <span class="author-label">作者</span>
                    </div>
                  </div>
                  <div class="time-info">
                    <svg viewBox="0 0 24 24" class="time-icon">
                      <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.7L16.2,16.2Z"/>
                    </svg>
                    <div class="time-details">
                      <span class="time-text">{{ formatTime(post.collectedTime) }}</span>
                      <span class="time-label">收藏时间</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 分页控件 -->
            <div class="pagination-container" v-if="currentPagination.totalPages > 1">
              <div class="pagination-wrapper">
                <button
                  class="pagination-button prev"
                  :disabled="currentPagination.currentPage <= 1"
                  @click="handlePrevPage"
                >
                  <svg viewBox="0 0 24 24" class="pagination-icon">
                    <path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"/>
                  </svg>
                  上一页
                </button>

                <div class="page-numbers">
                  <span class="page-info">
                    {{ currentPagination.currentPage }} / {{ currentPagination.totalPages }}
                  </span>
                </div>

                <button
                  class="pagination-button next"
                  :disabled="currentPagination.currentPage >= currentPagination.totalPages"
                  @click="handleNextPage"
                >
                  下一页
                  <svg viewBox="0 0 24 24" class="pagination-icon">
                    <path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"/>
                  </svg>
                </button>
              </div>
            </div>
          </template>
        </div>
      </main>
    </div>
  </div>
</template>

<style scoped>
.favorites-center-container {
  display: flex;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  background: transparent;
  border-radius: 12px;
  position: relative;
  min-height: calc(100vh - 120px);
  align-items: flex-start;
  gap: 32px;
}

.favorites-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 220px;
  height: calc(100vh - 120px);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(91, 110, 225, 0.1);
  padding: 0;
  margin: 75px 0 30px 120px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 10;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.sidebar-header {
  background: var(--gradient-blue);
  padding: 24px;
  text-align: center;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.sidebar-icon {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-icon .icon {
  width: 24px;
  height: 24px;
  fill: white;
}

.sidebar-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: white;
}

.category-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1 1 auto; /* 自动填满父容器剩余空间 */
  min-height: 0;
  max-height: 100%;
  width: 100%; /* 防止横向溢出 */
}

.category-item {
  margin-bottom: 8px;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.category-content {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 500;
}

.category-icon {
  font-size: 18px;
  opacity: 0.8;
}

.category-item.active,
.category-item:hover {
  background: var(--light-purple);
  transform: translateX(4px);
}

.category-item.active .category-content {
  color: var(--primary-purple);
  font-weight: 600;
}

.category-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--primary-purple);
  border-radius: 0 4px 4px 0;
}

.main-content {
  width: 850px !important;
  padding: 32px 40px;
  margin-left: 300px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 120px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(91, 110, 225, 0.1);
}

.favorites-header {
  margin-bottom: 32px;
  padding: 0 0 24px 0;
  border-bottom: 2px solid var(--border-light);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-left h2 {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
  background: var(--gradient-blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.category-name {
  color: var(--primary-purple);
  font-size: 18px;
  font-weight: 600;
}

.header-stats {
  display: flex;
  gap: 24px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--primary-blue);
  line-height: 1;
}

.stat-label {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
}

.favorites-list {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.favorites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.favorite-item {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.8));
  backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 28px;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 32px rgba(91, 110, 225, 0.12);
  position: relative;
  overflow: hidden;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  transform-origin: center;
}

.favorite-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(145deg, 
    rgba(162, 89, 236, 0.03) 0%, 
    rgba(91, 110, 225, 0.05) 50%, 
    rgba(162, 89, 236, 0.03) 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.favorite-item::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, 
    var(--primary-purple), 
    var(--primary-blue), 
    var(--primary-purple));
  border-radius: 26px;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.5s ease;
  animation: borderGlow 3s ease-in-out infinite;
}

@keyframes borderGlow {
  0%, 100% {
    background: linear-gradient(45deg, 
      var(--primary-purple), 
      var(--primary-blue), 
      var(--primary-purple));
  }
  50% {
    background: linear-gradient(45deg, 
      var(--primary-blue), 
      var(--primary-purple), 
      var(--primary-blue));
  }
}

.favorite-item:hover {
  background: #ede4ff; /* 悬停时变为淡紫色背景 */
  box-shadow: 0 20px 60px rgba(147, 51, 234, 0.15),
    0 8px 16px rgba(147, 51, 234, 0.1),
    0 4px 8px rgba(147, 51, 234, 0.05);
  border-color: #e4d4f4;
  transform: translateY(-12px) scale(1.03) rotateX(5deg);
}

.favorite-item:hover::before {
  /* opacity: 1; */
  /* background: linear-gradient(145deg, rgba(147, 51, 234, 0.06) 0%, rgba(243, 232, 255, 0.15) 50%, rgba(147, 51, 234, 0.06) 100%); */
  opacity: 0;
  background: none;
}

.favorite-item:hover::after {
  /* opacity: 0.35; */
  /* background: linear-gradient(45deg, #e4d4f4, #d6c7e8, #e4d4f4); */
  opacity: 0;
  background: none;
}

.favorite-item:active {
  transform: translateY(-8px) scale(1.01);
  transition: all 0.2s ease;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.bookmark-icon {
  width: 36px;
  height: 36px;
  background: var(--gradient-purple);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.bookmark-svg {
  width: 20px;
  height: 20px;
  fill: white;
  z-index: 2;
  position: relative;
}

.bookmark-shine {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.favorite-item:hover .bookmark-shine {
  transform: translateX(100%);
}

.category-badge {
  background: linear-gradient(135deg, var(--light-blue), var(--light-purple));
  color: var(--primary-blue);
  padding: 8px 16px;
  border-radius: 25px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
}

.badge-icon {
  font-size: 14px;
}

.post-main {
  flex: 1;
  margin-bottom: 20px;
}

.post-tags {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.tag {
  background: linear-gradient(135deg, var(--light-purple), var(--light-blue));
  color: var(--primary-purple);
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.post-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px 0;
  color: var(--text-primary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.post-content {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.post-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}

.author-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-avatar {
  width: 36px;
  height: 36px;
  background: var(--gradient-blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.avatar-text {
  color: white;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  z-index: 2;
  position: relative;
}

.favorite-item:hover .avatar-ring {
  opacity: 1;
}

.author-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.author-name {
  color: var(--primary-blue);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
}

.author-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.time-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
}

.time-icon {
  width: 16px;
  height: 16px;
  fill: var(--primary-purple);
  opacity: 0.7;
}

.time-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
}

.time-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1;
}

.time-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.loading-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  color: var(--text-secondary);
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--light-purple);
  border-top: 3px solid var(--primary-purple);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.empty-tips {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  text-align: center;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6));
  backdrop-filter: blur(20px);
  border-radius: 24px;
  margin-top: 40px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(91, 110, 225, 0.1);
  position: relative;
  overflow: hidden;
}

.empty-animation {
  position: relative;
  margin-bottom: 32px;
}

.floating-books {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 60px;
}

.book {
  position: absolute;
  font-size: 24px;
  animation: float 3s ease-in-out infinite;
}

.book-1 {
  left: 0;
  animation-delay: 0s;
}

.book-2 {
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 1s;
}

.book-3 {
  right: 0;
  animation-delay: 2s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
    opacity: 0.7;
  }
  50% {
    transform: translateY(-15px);
    opacity: 1;
  }
}

.empty-icon-container {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, var(--light-purple), var(--light-blue));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
  box-shadow: 0 8px 24px rgba(162, 89, 236, 0.2);
  position: relative;
}

.empty-icon-container::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background: linear-gradient(45deg, var(--primary-purple), var(--primary-blue));
  border-radius: 50%;
  z-index: -1;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

.empty-icon {
  width: 48px;
  height: 48px;
  fill: white;
}

.empty-content h3 {
  font-size: 28px;
  font-weight: 700;
  background: var(--gradient-blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 16px 0;
}

.empty-content p {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0 0 32px 0;
  line-height: 1.6;
  max-width: 400px;
}

.empty-features {
  display: flex;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
  justify-content: center;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  min-width: 80px;
}

.feature-icon {
  font-size: 20px;
}

.feature-item span:last-child {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
}

.explore-button {
  background: var(--gradient-blue);
  color: white;
  border: none;
  padding: 16px 32px;
  border-radius: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(91, 110, 225, 0.2);
}

.explore-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(91, 110, 225, 0.4);
}

.button-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: auto;
  padding-top: 32px;
}

.pagination-wrapper {
  display: flex;
  align-items: center;
  gap: 20px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
  backdrop-filter: blur(20px);
  padding: 20px 32px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(91, 110, 225, 0.15);
}

.pagination-button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border: 2px solid var(--border-light);
  background: linear-gradient(145deg, white, rgba(255, 255, 255, 0.8));
  color: var(--text-primary);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 600;
  font-size: 14px;
  position: relative;
  overflow: hidden;
}

.pagination-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.5s ease;
}

.pagination-button:hover:not(:disabled) {
  background: linear-gradient(145deg, var(--light-blue), var(--light-purple));
  border-color: var(--primary-blue);
  color: var(--primary-blue);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 24px rgba(91, 110, 225, 0.2);
}

.pagination-button:hover:not(:disabled)::before {
  left: 100%;
}

.pagination-button:active:not(:disabled) {
  transform: translateY(-1px) scale(1.02);
}

.pagination-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.5);
}

.pagination-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
  transition: transform 0.3s ease;
}

.pagination-button:hover:not(:disabled) .pagination-icon {
  transform: scale(1.1);
}

.page-numbers {
  margin: 0 20px;
}

.page-info {
  font-size: 15px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--light-purple), var(--light-blue));
  color: var(--primary-purple);
  padding: 12px 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

@media (max-width: 1200px) {
  .favorites-grid {
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
  }
  
  .main-content {
    margin-left: 320px;
    padding: 28px 32px;
  }
  
  .favorites-sidebar {
    width: 260px;
  }
}

@media (max-width: 768px) {
  .favorites-center-container {
    flex-direction: column;
    gap: 20px;
    max-width: 100%;
    padding: 0 16px;
  }
  
  .favorites-sidebar {
    position: static;
    width: 100%;
    height: auto;
    margin: 0;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(91, 110, 225, 0.1);
  }
  
  .category-list {
    padding: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .category-item {
    margin-bottom: 0;
    flex: 1;
    min-width: 120px;
  }
  
  .category-content {
    padding: 12px 16px;
    justify-content: center;
  }
  
  .main-content {
    margin-left: 0;
    width: 100%;
    padding: 24px 20px;
    border-radius: 16px;
  }
  
  .favorites-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .header-content {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  
  .header-left h2 {
    font-size: 24px;
  }
  
  .stat-number {
    font-size: 20px;
  }
  
  .favorite-item {
    min-height: 200px;
    padding: 20px;
  }
  
  .favorite-item:hover {
    transform: translateY(-6px) scale(1.02);
  }
  
  .pagination-wrapper {
    flex-direction: column;
    gap: 16px;
    padding: 20px;
  }
  
  .pagination-button {
    width: 100%;
    justify-content: center;
    padding: 16px 24px;
  }
  
  .empty-features {
    flex-direction: column;
    gap: 16px;
  }
  
  .feature-item {
    flex-direction: row;
    min-width: auto;
    width: 100%;
    gap: 12px;
    padding: 12px 16px;
  }
}

@media (max-width: 480px) {
  .favorites-center-container {
    padding: 0 12px;
  }
  
  .main-content {
    padding: 20px 16px;
  }
  
  .favorite-item {
    padding: 16px;
    min-height: 180px;
  }
  
  .post-title {
    font-size: 16px;
  }
  
  .post-content {
    font-size: 13px;
  }
  
  .header-left h2 {
    font-size: 20px;
  }
  
  .empty-content h3 {
    font-size: 22px;
  }
  
  .empty-content p {
    font-size: 14px;
  }
  
  .category-content {
    font-size: 14px;
    gap: 8px;
  }
  
  .sidebar-header {
    padding: 20px;
  }
  
  .sidebar-header h3 {
    font-size: 16px;
  }
  
  .pagination-button {
    padding: 14px 20px;
    font-size: 13px;
  }
}
</style>
